<template name="pay-platform">
  <view class="container">
    <u-action-sheet
        :show="sheetShow"
        round="36rpx"
    >
      <view class="sheet-body">
        <view class="sheet-close-icon" @click="closeSheet"></view>
        <view class="sheet-title">立即支付</view>
        <view class="sheet-price">{{ payPrice }}</view>
        <view class="sheet-pay-type">选择支付方式</view>
        <view class="sheet-pay-platform">
          <u-list
                height="295rpx"
          >
            <!--view class="sheet-pay-item" @click="selectPlatform('plutus')">
              <view class="sheet-icon icon-wechat"></view>
              <view class="sheet-pay-name">微信支付</view>
              <view class="sheet-pay-select" v-if="type=='plutus'"></view>
            </view-->
            <!-- #ifdef H5 -->
            <!--block v-if="weChat()">
                <view class="sheet-pay-item" @click="selectPlatform('wechat')">
                    <view class="sheet-icon icon-wechat"></view>
                    <view class="sheet-pay-name">微信支付</view>
                    <view class="sheet-pay-select" v-if="type=='wechat'"></view>
                </view>
            </block-->
            <view class="sheet-pay-item" v-if="orderType==='grab'" @click="selectPlatform('union')">
              <view class="sheet-icon icon-union"></view>
              <view class="sheet-pay-name">银联支付</view>
              <view class="sheet-pay-select" v-if="type=='union'"></view>
            </view>
            <!-- #endif -->
            <view class="sheet-pay-item" @click="selectPlatform('alipay')">
              <view class="sheet-icon icon-alipay"></view>
              <view class="sheet-pay-name">支付宝支付</view>
              <view class="sheet-pay-select" v-if="type=='alipay'"></view>
            </view>
          </u-list>
        </view>
        <view class="sheet-bottom">
          <view class="sheet-onsubmit" @tap="$u.throttle(payment, 1500)">确认支付</view>
        </view>
      </view>
    </u-action-sheet>
  </view>
</template>

<script>
  import { payGrabOrder, nativePay, wechatOrderPay, getPlutusPayGrab, getPlutusPayOrder } from "@/config/api-java"
  import { javaBaseUrl } from "@/config/config"
  // #ifdef H5
  import { isWeChat } from "@/untils"
  // #endif
  export default {
    name: "pay-platform",
    props: {
      sheetShow: {
        type: Boolean,
        default: null
      },
      orderId: {
        type: Number,
        default: null
      },
      payPrice: {
        default: null
      },
      orderType: {
        type: String,
        default: 'grab'
      }
    },
    data() {
      return {
        // #ifdef H5
        type: "alipay",
        // #endif
        // #ifdef APP-PLUS
        type: "alipay",
        // #endif
      }
    },
    created() {
      // #ifdef H5
      if (isWeChat() && this.orderType === 'grab') {
        this.type = 'union'
      } else if (isWeChat() && this.orderType === 'order') {
        this.type = 'alipay'
      } else {
        this.type = 'alipay'
      }
      // #endif
    },
    methods: {
      selectPlatform(type) {
        this.type = type
      },
      async payment() {
        uni.showLoading()
        if (this.type == 'wechat') {
          await this.wechatPay()
        } else if (this.type == 'union') {
          //await
          this.qrcodeUrl()
        } else if (this.type == 'alipay') {
          this.aliPay()
        } else if (this.type == 'plutus') {
          await this.plutusPay()
        }
        uni.hideLoading()
      },
      async wechatPay() {
        uni.showLoading({
          title: '正在发起支付'
        })
        if(this.orderType === 'grab') {
          var payInfo = await payGrabOrder({
            id: this.orderId,
            openId: this.$store.getters.mpOpenId
          })
        } else if(this.orderType === 'order') {
          var payInfo = await wechatOrderPay({
            id: this.orderId,
            openId: this.$store.getters.mpOpenId
          })
        }
        uni.hideLoading()
        const payment = payInfo.jsapi
        const than= this
        // #ifdef H5
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
                  appId: payment.appId,
                  timeStamp: payment.timeStamp,
                  nonceStr: payment.nonceStr,
                  paySign: payment.paySign,
                  package: payment.packageValue,
                  signType: payment.signType
                },
                function(res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    than.$emit("pay", {
                      orderType: than.orderType,
                      id: than.orderId
                    })
                  }
                })
        // #endif
      },
      async qrcodeUrl() {
        // #ifdef H5
        if(isWeChat()) {
          uni.showLoading({
            title: '正在发起支付'
          })
          const res = await nativePay({id: this.orderId})
          window.location.href = res.codeUrl
        } else {
          this.navigateTo("pages/unionQrcode/index", {id: this.orderId, payPrice: this.payPrice })
        }
        // #endif
      },
      closeSheet() {
        this.$emit("close")
      },
      aliPay() {
        this.$emit("pay", null)
        if (this.orderType === 'order') {
          var src = javaBaseUrl + '/alipay/order/pay/' + this.orderId
        } else {
          var src = javaBaseUrl + '/alipay/grabOrder/pay/' + this.orderId
        }
        // #ifdef H5
        window.location.href = src
        // #endif
        // #ifdef APP-PLUS
        this.navigateTo("pages/webView/index", {url: src})
        //plus.runtime.openURL(src)
        // #endif
        //this.navigateTo("pages/webView/index", {orderType: this.orderType, id: this.orderId})
      },
      async plutusPay() {
        //this.$emit("pay", null)
        if (this.orderType === 'order') {
          //var src = javaBaseUrl + '/plutusPay/order/pay/' + this.orderId
          var url = await getPlutusPayOrder(this.orderId)
        } else {
          var url = await getPlutusPayGrab(this.orderId)
        }
        // #ifdef H5
        window.location.href = url
        // #endif
        // #ifdef APP-PLUS
        //plus.runtime.openURL(url)
        this.navigateTo("pages/webView/index", {url: url})
        // #endif
      },
      navigateTo(path, params={}) {
        uni.$u.route({
          url: path,
          params
        })
      },
      weChat() {
        return isWeChat()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .sheet-body {
      height: 750rpx;
      position: relative;
      .sheet-title {
        font-size: 36rpx;
        font-weight: 400;
        color: #000000;
        margin-top: 40rpx;
      }
      .sheet-price {
        font-size: 60rpx;
        font-weight: bold;
        color: #000000;
        margin-top: 40rpx;
      }
      .sheet-pay-type {
        margin-top: 51rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #888888;
        text-align: left;
        padding-left: 46rpx;
      }
      .sheet-pay-platform {
        padding-left: 46rpx;
        .sheet-pay-item {
          margin-top: 45rpx;
          display: flex;
          justify-items: flex-start;
          align-items: center;
          position: relative;
          .sheet-icon {
            width: 54rpx;
            height: 54rpx;
          }
          .icon-wechat {
            background: url("https://img.ionepin.com/8b39cd12a17c9c6bae43578dabb18f181ac43c92.png") no-repeat;
            background-size: 100% 100%;
          }
          .icon-qrcode {
            background: url("https://img.ionepin.com/498a2bc98d09c6aa36e879e8dce70f6baa32dc7e.png") no-repeat;
            background-size: 100% 100%;
          }
          .icon-union {
            background: url("https://img.ionepin.com/ad69894494c86b02230e063c0a6e9936c60f629e.png") no-repeat;
            background-size: 100% 100%;
          }
          .icon-alipay {
            background: url("https://img.ionepin.com/3d099d7ddbb30f195cd4b5e1295af43fe3396c87.png") no-repeat;
            background-size: 100% 100%;
          }
          .sheet-pay-name {
            margin-left: 25rpx;
            font-size: 32rpx;
            font-weight: 400;
            color: #000000;
            line-height: 1.5;
          }
          .sheet-pay-select {
            position: absolute;
            right: 42rpx;
            background: url("https://img.ionepin.com/bf215d90109c882742e253b64bd3c052eda28243.png") no-repeat;
            background-size: 100% 100%;
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
      .sheet-bottom {
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        padding: 0 20rpx;
        .sheet-onsubmit {
          height: 90rpx;
          background: #000000;
          font-size: 30rpx;
          font-weight: 400;
          color: #FFFFFF;
          text-align: center;
          line-height: 90rpx;
        }
        bottom: 50rpx;
      }
      .sheet-close-icon {
        background: url("https://img.ionepin.com/e6ca3bf6b372078fed03bc62894656f098fac42c.png") no-repeat;
        background-size: 100% 100%;
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        top: 30rpx;
        right: 38rpx;
      }
    }
  }
</style>
